<template>
	<view class="content bg-drak ft-main">
		<view class="padding-lr padding-bottom-sm margin-tb-sm" style="font-size: 15px;color: #1b1b20;">
			请拍摄并上传你的身份证照片
		</view>
		<view class="row1 dflex dflex-b padding-lr margin-tb-sm">
			<image :src="tempImage.frontDocument||'https://img.shihuashengyi.cn/static/bank/card.png'" @click="uploadImgs('frontDocument')" mode="widthFix"></image>
			<image :src="tempImage.backDocument||'https://img.shihuashengyi.cn/static/bank/cardback.png'" @click="uploadImgs('backDocument')" mode="widthFix"></image>
		</view>
		<view class="padding-lr margin-tb-sm padding-top">
			<image :src="tempImage.handDocument||'https://img.shihuashengyi.cn/static/bank/shouchi.png'" style="width: 100%;" @click="uploadImgs('handDocument')" mode="widthFix"></image>
		</view>
			<view class="row dflex padding-lr">
			<text class="tit">真实姓名</text>
			<input class="input" type="text" v-model="subData.realName" placeholder="真实姓名"
				placeholder-class="placeholder" />
		</view>
		<view class="row dflex padding-lr">
			<text class="tit">身份证号</text>
			<input class="input" type="text" v-model="subData.documentNumber" placeholder="请输入身份证号码"
				placeholder-class="placeholder" />
		</view>
		<view class="row dflex padding-lr">
			<text class="tit">有效期</text>
			<picker mode="date" @change="onValidity" >{{subData.validity||"请选择"}}</picker>


			<view v-if="subData.validity=='2099-12-31'" class="dflex active" style="margin-left: auto;">
				<text>长期有效</text>
				<text class="iconfont iconxuanzhongzhuangtai padding-tb-sm padding-right-sm"></text>
			</view>
			<view v-else class="dflex ft-dark" style="margin-left: auto;" @tap.stop="subData.validitying='2099-12-31'">
				<text>长期有效</text>
				<text class="iconfont iconweixuanzhongzhuangtai padding-tb-sm padding-right-sm"></text>
			</view>
			<!-- <input class="input" type="text" v-model="subData.validity" placeholder="请输入证件有效期YYYY-MM-DD格式"
				placeholder-class="placeholder" /> -->
		</view>
		<view class=" padding-lr">
			<text class="tip">拍摄身份证要求：</text>
			<br>
			<text class="tip1">
				大陆公民持有的本人有效二代身份证<br>
				拍摄时确保身份证边框完整，字体清晰，亮度均匀
			</text>
		</view>

		<view class="padding w-full margin-top-big" >
			<view class="dflex-b border-radius-big">
				<view class="tac padding-tb-sm flex1 bg-base" v-if="userInfo.znAuthenticationed=='true'" >已实名</view>
				<view class="tac padding-tb-sm flex1 bg-base" v-else @click="submit">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
import {builderApi} from '@/js_sdk/config.js'
import store from '@/store'
	import {real_name,user_authentication} from "../../../js_sdk/apis/user.js"
	export default {
		data() {
			return {
				// 加载更多状态
				loadmoreType: 'nomore',
				postData:"",
				tempImage:{
					backDocument:"",
					frontDocument:"",
					handDocument:""
				},
				// 浏览历史数据源
				subData: {
					backDocument:"",//	证件照(反面)地址	query	true
					documentNumber:"",//	证件号码	query	true
					documentType:"1",//	证件类型cardType	query	true
					frontDocument:"",//	证件照(正面)地址	query	true
					handDocument:"",//	证件照(手持)地址	query	true
					realName:"",//	真实姓名	query	true
					validity:"",//	证件有效期
				},
				empty: false,
				hasmore: 0,
				reqdata: {
					rows: 20,
					page: 1
				},
				scrollTop: 0,
			};
		},
		computed: {
			userInfo(){
				return this.$store.state.user.userInfo
			}
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			onValidity(e){
				this.subData.validity=e.detail.value
			},
			submit(){
				let {backDocument,
					documentNumber,
					documentType,
					frontDocument,
					handDocument,
					realName,
					validity
				} =this.subData
				if(!validity){
					this.$api.msg('请选择身份证有效期');
					return
				}
				var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if(reg.test(documentNumber) === false) {
				  this.$api.msg('请输入正确身份证号！');
				  return
				}
				if(!backDocument||!frontDocument||!handDocument){
					this.$api.msg('请选择身份证照片');
					return
				}
				if(!realName||!documentNumber){
					this.$api.msg('请完善身份信息');
					return
				}
				real_name(this.subData).then(res=>{
					this.$api.msg('认证成功');
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				})
			},
			uploadImgs(options) {
				let _this = this;
				uni.chooseImage({
					count: 1,
					// 可以指定是原图|压缩图，默认二者都有
					sizeType: ['original', 'compressed'],
					success:  (res) => {
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						this.tempImage[options]=res.tempFilePaths[0]
						uni.uploadFile({
							url: builderApi('/lykj-shop/zn/uploadApplyPhoto'), //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							method: "POST",
							header:{...store.getters['user/headers']}
						}).then( uRes => {
							_this.subData[options]=JSON.parse(uRes[1].data).data.content.responseValue
						}).catch(err => {
							console.log('use-upload', err);
						});
						uni.hideLoading();
					}
				});
			},
			// 加载数据
			loadData() {
				user_authentication().then(res=>{
					console.log(res)
					if(res.data&&res.data.content&&res.data.content.applyId){
						this.subData=res.data.content
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}
.tip{
	font-family: SourceHanSansCN-Normal;
	font-size: 15px;
	color: #1b1b20;
}
.tip1{
	font-size: 13px;
		color: #919191;
}
.row1{
	width: 100%;
	height: 140px;
	.bg-main {
		height: 100%;
		flex-shrink: 0;
	}
	.fs{
		text-align: center;
	}
	image{
		width: 49%;
	}
}
	.row {
		background: #fff;
		position: relative;
		height: 110rpx;
		margin: 20rpx;
		border-radius: 20rpx;

		.tit {
			flex-shrink: 0;
			width: 150rpx;
		}

		.input {
			flex: 1;
			font-size: 30rpx;
			padding-left: 0;
		}

		.input_t {
			color: #333;
		}
	}
</style>
